<template>
  <div class="container">
    <div class="my-money-box">
      <div class="bottom-bg"></div>
      <!-- <navigator class="invest-add" :url="'/pages/invest-add/main'">追加投资</navigator> -->
      <navigator :url="'/pages/assets-detail/main'" :hover-class="none" class="my-money">
        <span class="money">{{userInfo.totalMoney}}</span>
        <span class="txt">总资产 (￥)</span>
      </navigator>
      <navigator class="my-earnigns" :url="'/pages/assets-detail/main'" :hover-class="none">
        <div class="each">
          <span class="key">累计收益(￥)</span>
          <span class="value">{{userInfo.addUpIncome}}</span>
        </div>
        <div class="each">
          <span class="key">最新收益(￥)</span>
          <span class="value">{{userInfo.newIncome}}</span>
        </div>
        <div class="each">
          <span class="key">最新净值(￥)</span>
          <span class="value blue">{{userInfo.newValue}}</span>
        </div>
        <div class="each">
          <span class="key">最新回撤(￥)</span>
          <span class="value blue">{{userInfo.newBack}}</span>
        </div>
      </navigator>
    </div>
    <div class="my-compose product box" >
      <div class="box-title">
        <span class="title">我的组合</span>
        <navigator :url="'/pages/risk-assessment/main'" :hover-class="none" class="button">用户测评</navigator>
        <!-- <navigator :hover-class="none" class="button" @click="resetData">数据重置</navigator> -->
      </div>
      <navigator :url="'/pages/compose-detail/main?id='+ userInfo.investGroupID+ '&flag=1'" :hover-class="none">
      <div class="box-body">
        <div class="item">
          <p class="value">{{userInfo.annualIncome}}</p>
          <p class="key">预期年化收益</p>
          <p class="other">
            <!-- 亏损厌恶度:<span class="txt">{{userInfo.detest}}</span> -->
          </p>
        </div>
        <div class="item">
          <p class="value">{{userInfo.maxLost}}</p>
          <p class="key">最大回撤</p>
          <p class="other">
            <!-- 最大亏损:<span class="txt">{{userInfo.userMaxLost}}</span> -->
          </p>
        </div>
        <div class="item">
          <p class="value">{{userInfo.riskReturnRatio}}</p>
          <p class="key">收益风险比</p>
          <p class="other">
            <!-- 交易频率:<span class="txt">{{userInfo.dealRate}}</span> -->
          </p>
        </div>
      </div>
      </navigator>
      <div class="box-footer">
        <navigator :url="'/pages/compose-detail/main?id='+ userInfo.investGroupID+ '&flag=1'" :hover-class="none" class="my-show-my">
        <i class="icon"></i>查看我的组合>
        </navigator>
      </div>
    </div>

    <div class="pod-box">

      <navigator v-if="userInfo.userF > 0" :url="'/pages/invest-change/main'" :hover-class="none">

      <div class="pod-info">
        <p class="txt">最新调仓：<span v-if="userInfo.changeFinish == 0 && userInfo.userF > 0">{{userInfo.newChange}}></span><span v-else-if="userInfo.userF < 1">您的金币余额不足，暂无法接受我们的调仓指令，请先去充值</span>
        <span v-else>{{userInfo.newChange}}</span></p>
        <p class="tips"  v-if="userInfo.changeFinish == 0">
            您当期的调仓还未完成，点击去完成
        </p>
        <p class="tips"  v-else>
            您的调仓已完成
        </p>
      </div>
      </navigator>

      <navigator v-else :hover-class="none" @click="showRechargeBtn">

      <div class="pod-info">
        <p class="txt">最新调仓：<span v-if="userInfo.changeFinish == 0 && userInfo.userF > 0">{{userInfo.newChange}}></span><span v-else-if="userInfo.userF < 1">您的金币余额不足，暂无法接受我们的调仓指令，请先去充值</span>
        <span v-else>{{userInfo.newChange}}</span></p>
        <p class="tips"  v-if="userInfo.changeFinish == 0">
            您当期的调仓还未完成，点击去完成
        </p>
        <p class="tips"  v-else>
            您的调仓已完成
        </p>
      </div>
      </navigator>


      <span class="arrow">></span>
    </div>


    <div class="fb-box">
      <div class="fb-info">
        <div class="balance">
          金币余额：<span class="value">{{userInfo.userF}}</span>
        </div>
        <!-- <span class="recharge" @click="recharge">充值</span> -->
         <navigator :url="'/pages/f-bag/main'" :hover-class="none" class="button recharge" v-show="rechargeBtn">充值</navigator>
      </div>
      <p class="tips">我的组合每天需消耗1个金币当前余额可用至<span class="date">{{userInfo.lastDate}}</span></p>
    </div>
    <div class="other-fun">
      <navigator :url="'/pages/f-bag/main'" :hover-class="none" class="each">
        <i class="icon fb"></i>
        <span class="txt">金币钱包</span>
      </navigator>
      <navigator :url="'/pages/fixed-investment/main'" :hover-class="none" class="each">
        <i class="icon remind"></i>
        <span class="txt">定投提醒</span>
       </navigator>
      <div class="each" @click="resetDatas">
        <i class="icon invite"></i>
        <span class="txt" >数据重置</span>
      </div>
    </div>
  </div>
</template>

<script>
import {getUserInfo} from '@/utils/model';
import {resetData} from '@/utils/model';
export default {
  data() {
    return {
      userInfo: {},
      rechargeBtn: false
    }
  },
  onShow() {
    getUserInfo().then(res => {
      if(res.code == 20001){
        wx.showModal({showCancel:false, title:'还未评测，请先评测', content:res.msg, success(){
          wx.navigateTo({
               url: '/pages/risk-assessment/main'
          })
        }})
      }else if(res.code == 10011){
        wx.showModal({showCancel:false, title:'您还未投资', content:res.msg, success(){
          wx.navigateTo({
               url: '/pages/invest-add/main'
          })
        }})
      }
      this.userInfo = res;
      this.rechargeBtn = res.showRechargeBtn;
    })
  },
  methods:{
    resetDatas(){
      wx.showModal({showCancel:true,title:'数据重置', content:'警告：数据重置后，您的用户评测信息、资产数据和组合数据都将被清空，请确认是否要继续重置', success(ret){
        if(ret.cancel){

        }else{
          resetData().then(res => {
            wx.showToast({
              title: res.msg,
              icon: 'none',
            })
          })
        }
      }})
    },

    showRechargeBtn(){
      wx.showModal({showCancel:true,title:'余额不足', content:'请先充值', success(ret){
        if(ret.cancel){

        }else{
          wx.navigateTo({url: "/pages/f-bag/main"});
        }
      }})
    }



  }
}
</script>


<style lang="less" scoped>
.my-money-box {
  width: 690rpx;
  height: 346rpx;
  background-color: #fff;
  border-radius: 9rpx;
  margin-top: 40rpx;
  position: relative;
  margin-bottom: 20rpx;
  .invest-add {
    height: 50rpx;
    width: 150rpx;
    line-height: 50rpx;
    text-align: center;
    font-size: 26rpx;
    color: #fff;
    background-color:#4768f3;
    border-radius:25rpx;
    position: absolute;
    top: 10rpx;
    right: 30rpx;
  }
  .bottom-bg {
    width: 690rpx;
    height: 51rpx;
    background: url('./img/my_box_bg.png') no-repeat 0 0;
    background-size: cover;
    position: absolute;
    bottom: 0;
  }
  .my-money {
    height: 156rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 2rpx solid #e5e5e5;
    .money {
      font-size: 40rpx;
      color: #ff6a5a;
      font-weight: bold;
    }
    .txt {
      font-size: 32rpx;
      color: #999999;
    }
  }
  .my-earnigns {
    height: 100rpx;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    padding-top: 30rpx;
    .each {
      flex: 0 0 50%;
      height: 64rpx;
      .key {
        font-size: 24rpx;
        color: #999999;
        margin-right: 18rpx;
        padding-left: 30rpx;
      }
      .value {
        font-size: 30rpx;
        color: #ff6a5a;
        &.blue {
          color: #4768f3;
        }
      }
    }
    .item {
      flex: 0 0 50%;
      text-align: center;
      .value {
        font-size: 30rpx;
        color: #ff6a5a;
        font-weight: bold;
      }
      .key {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}
.my-compose {
  .box-title {
    justify-content: space-between;
    .button {
      width: 150rpx;
      height: 50rpx;
      font-size: 26rpx;
      color: #ffffff;
      line-height: 50rpx;
      text-align: center;
      background-color: #4768f3;
      border-radius: 25rpx;
      margin-right: 30rpx;
    }
  }
  .box-body {
    border-bottom: 0;
  }
  .box-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 20rpx 0;
  }
  .my-show-my {
    width: 214rpx;
    height: 36rpx;
    background-color: #dce3fd;
    color: #4768f3;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16rpx;
    .icon {
      width: 26rpx;
      height: 22rpx;
      background: url('./img/compose_icon.png') no-repeat 0 0;
      background-size: cover;
      margin-right: 5rpx;
    }
  }
  .cp-result {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 30rpx 0;
    .item {
      flex: 1 1 50%;
      display: flex;
      font-size: 28rpx;
      margin: 15rpx 0;
      .t {
        width: 220rpx;
        text-align: right;
        color: #000;
      }
      .v {
        color: #e74612;
        &.v-circle {
          width: 36rpx;
          height: 36rpx;
          border-radius: 50%;
          color: #fff;
          font-size: 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        &.low {
          background-color: #4dba2d;
        }
        &.middle {
          background-color: #ff9500;
        }
        &.high {
          background-color: #ff6a59;
        }
      }
    }
  }
}
.pod-box {
  width: 690rpx;
  height: 134rpx;
  border-radius: 9rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-bottom: 20rpx;
  .pod-info {
    padding-left: 30rpx;
    .txt {
      font-size: 30rpx;
      color: #333333;
      margin-bottom: 10rpx;
    }
    .tips {
      font-size: 24rpx;
      color: #ff6a59;
    }
  }
  .arrow {
    font-size: 28rpx;
    color: #333333;
    margin-right: 60rpx;
  }
}
.fb-box {
  width: 690rpx;
  height: 144rpx;
  background-color: #fff;
  border-radius: 9rpx;
  margin-bottom: 20rpx;
  .fb-info {
    display: flex;
    height: 50rpx;
    justify-content: space-between;
    align-items: center;
    padding: 18rpx 37rpx 0 33rpx;
    margin-bottom: 20rpx;
    .balance {
      font-size: 30rpx;
      color: #333333;
      .value {
        color: #e74612;
      }
    }
    .recharge {
      width: 99rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      font-size: 26rpx;
      color: #ffffff;
      background-color: #4768f3;
      border-radius: 25rpx;
    }
  }
  .tips {
    margin-left: 33rpx;
    font-size: 24rpx;
    color: #999999;
    .date {
      color: #ff6a59;
    }
  }
}
.other-fun {
  width: 690rpx;
  height: 166rpx;
  background-color: #fff;
  border-radius: 9rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  .each {
    flex: 0 0 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .icon {
      display: block;
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 20rpx;
      &.fb {
        background: url(./img/wallet.png) no-repeat;
        background-size: cover;
      }
      &.remind {
        background: url(./img/remind.png) no-repeat;
        background-size: cover;
      }
      &.invite {
        background: url(./img/invite.png) no-repeat;
        background-size: cover;
      }

    }
    .txt {
      font-size: 26rpx;
      color: #666666;
    }
    &.middle::before {
      content: '';
      display: block;
      width: 0;
      height: 89rpx;
      border-left: 1rpx dashed #ededed;
      position: absolute;
      top: 9rpx;
      left: 0;
    }
    &.middle::after {
      content: '';
      display: block;
      width: 0;
      height: 89rpx;
      border-right: 1rpx dashed #ededed;
      position: absolute;
      top: 9rpx;
      right: 0;
    }
  }
}
.showMyBtn {
  width: 100%;
  height: 50rpx;
  font-size: 26rpx;
  color: #ffffff;
  line-height: 50rpx;
  text-align: center;
  background-color: #4768f3;
  border-radius: 25rpx;
  margin-right: 30rpx;
}
.box-menu {
  .menu-item {
    height: 110rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    .left {
      display: flex;
      align-items: center;
      .icon {
        width: 50rpx;
        height: 50rpx;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cover;
        margin-right: 20rpx;
        &.icon1 {
          background-image: url('./img/icon1.png');
        }
        &.icon2 {
          background-image: url('./img/icon2.png');
        }
        &.icon3 {
          background-image: url('./img/icon3.png');
        }
        &.icon4 {
          background-image: url('./img/icon4.png');
        }
      }
      .title {
        font-size: 30rpx;
        color: #333333;
      }
    }
    .right-arrow {
      width: 15rpx;
      height: 23rpx;
      background: url('./img/right-arrow.png') no-repeat 0 0;
      background-size: cover;
    }
  }
  .menu-item + .menu-item {
    border-top: 1rpx solid #f0f0f0;
  }
}
</style>
